<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">创建</button>
		<ul>
			aaaaa
		</ul>
		<script type="text/javascript">
			//第一种创建方式:documen.write();
			document.write("<li>我是document.write创建的</li>");
			
			var btn = document.getElementsByTagName("button")[0];
			var ul = document.getElementsByTagName("ul")[0];
			   btn.onclick = function () {
       document.write("<li>我是document.write创建的</li>");
   }
			//第二种:直接利用元素的innerHTML方法.(innerText方法不识别标签)
			ul.innerHTMlL += "<li id = 'li1'>我是innerHTML创建的</li>"
			
			//第三种,利用dom的api创建元素
			var newLi = document.createElement("li");
			newLi.innerHTML = "我是createElement创建的";
			console.log(newLi);
			//在父盒子后面添加元素
			ul.appendChild(newLi);
			//指定位置添加
			var li1 = document.getElementById("li1");
			ul.insertBefore(newLi,li1);
		</script>
	</body>
</html>
